<template>
    <div>
        <van-nav-bar title="店铺关注" :border="false"
                     left-arrow fixed placeholder
                     @click-left="$router.back()"/>
        <white-space/>
        <empty v-if="emptyStores" description="您还没有关注任何店铺"/>
        <follow-store-list-item v-for="store in stores" :key="store.id" :store="store"
                                @unfollowing="handleUnfollowingStore(store)"
                                v-else/>
    </div>
</template>

<script>
  import { NavBar, Toast } from "vant"
  import WhiteSpace from "@/components/WhiteSpace"
  import { follow, security } from "@mall/api-services"
  import _ from "lodash"
  import Empty from "@/components/Empty"
  import FollowStoreListItem from "@/views/follow/FollowStoreListItem"

  export default {
    name: "FollowStoreList",
    components: {
      WhiteSpace,
      Empty,
      FollowStoreListItem,
      [NavBar.name]: NavBar,
    },
    computed: {
      emptyStores() {
        return _.isEmpty(this.stores)
      },
    },
    data() {
      return {
        stores: [],
      }
    },
    created() {
      this.refreshStores()
    },
    methods: {
      refreshStores() {
        const customerId = security.SecurityUserHolder.getUserId()
        follow.FollowServiceV1.getFollowingStores()
          .customerId(customerId)
          .list()
          .then(pagedStores => this.stores = pagedStores.elements)
      },
      handleUnfollowingStore(product) {
        this.productFollowing = false
        const customerId = security.SecurityUserHolder.getUserId()
        follow.FollowServiceV1.unfollowingStore(customerId, product.id)
          .then(() => Toast("取消关注"))
          .then(this.refreshStores)
      },
    },
  }
</script>

<style lang="scss" scoped>
</style>
